<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <meta name="author" content="Ajj">
    <title>图片切换</title>
    <script src="../jquery-3.1.1.js"></script>
    <style>
        * {
            box-sizing: border-box;
        }
        
        h2,
        p,
        ul,
        li {
            margin: 0;
            padding: 0;
            list-style-type: none;
        }
        
        #sidebar {
            width: 192px;
            border: 1px solid #ccc;
            margin: 0 auto;
        }
        
        #sidebar h2 {
            height: 30px;
            line-height: 30px;
            background-color: #eee;
            font-size: 18px;
            text-align: center;
        }
        
        #sidebar li {
            width: 180px;
            height: 150px;
            margin: 5px;
            overflow: hidden;
            cursor: pointer;
            position: relative;
        }
        
        #sidebar .imgbox {
            width: 360px;
            height: 150px;
            position: absolute;
            top: 0;
            left: 0;
        }
        
        .imgbox img {
            float: left;
        }
        
        #sidebar .imgtitle {
            height: 40px;
            width: 100%;
            line-height: 20px;
            text-align: center;
            color: white;
            position: absolute;
            left: 0;
            bottom: -20px;
            font-size: 12px;
        }
        
        .imgtitle p {
            width: 100%;
            height: 20px;
            position: absolute;
            left: 0;
            top: 0;
        }
        
        .imgtitle p:last-child {
            top: 20px;
        }
        
        .red p {
            background-color: #d96160;
        }
        
        .green p {
            background-color: #134752;
        }
        
        .blue p {
            background-color: #2271af;
        }
    </style>
</head>

<body>
    <div id="sidebar">
        <h2>专辑推荐</h2>
        <ul>
            <li>
                <!--图片-->
                <div class="imgbox">
                    <img src="../images/1_1.jpg" alt="">
                    <img src="../images/1_2.jpg" alt="">
                </div>
                <!--文字-->
                <div class="imgtitle red">
                    <p>COCOON/可可尼</p>
                    <p>几何为网-极致绚烂</p>
                </div>
            </li>
            <li>
                <div class="imgbox">
                    <img src="../images/2_1.jpg" alt="">
                    <img src="../images/2_2.jpg" alt="">
                </div>
                <!--文字-->
                <div class="imgtitle green">
                    <p>INSUN/恩裳</p>
                    <p>几何为网-极致绚烂</p>
                </div>
            </li>
            <li>
                <div class="imgbox">
                    <img src="../images/3_1.jpg" alt="">
                    <img src="../images/3_2.jpg" alt="">
                </div>
                <!--文字-->
                <div class="imgtitle blue">
                    <p>JNBY/江南布艺</p>
                    <p>几何为网-极致绚烂</p>
                </div>
            </li>
        </ul>
    </div>
</body>

</html>
<script>
    $(function () {
        $('#sidebar li').hover(function () {
            $(this).find('.imgbox').stop().animate({ left: -180 }, 500);
            // 第一个p下去 第二个是上来
            $(this).find('p').eq(0).stop().animate({ top: 20 }, 500);
            // 第二个是上来
            $(this).find('p').eq(1).stop().animate({ top: 0 }, 500);
        }, function () {
            $(this).find('.imgbox').stop().animate({ left: 0 }, 500);
            // 第一个p下去 第二个是上来
            $(this).find('p').eq(0).stop().animate({ top: 0 }, 500);
            // 第二个是上来
            $(this).find('p').eq(1).stop().animate({ top: 20 }, 500);
        });
    });

</script>